<template>
    <div class="flex flex-col h-full text-sm bg-gray-100">
        <div class="pb-2 bg-gradient-to-tr from-red-500 to-red-300 shrink-0">
            
            <div class="relative py-3 text-base text-center text-gray-50">
                <Back class=" top-1/2 -translate-y-1/2 absolute !bg-transparent"/><span>购物车</span>
            </div>
            <div class="flex items-center justify-between px-4 text-xs text-gray-100 ">
                <div>共有 3 件商品</div>
                <div class="px-2 py-px border rounded-full">编辑</div>
            </div>
        </div>
        <div class="p-3 space-y-4 overflow-y-auto grow">
            <div class="p-2 bg-white rounded-md" v-for="(item, index) in 2">
                <div class="flex items-center space-x-2">
                    <Checkbox class="shrink-0" />
                    <div>自营店</div>
                </div>
                <div class="mt-2">
                    <div class="flex items-start space-x-2">
                        <div class="flex items-center space-x-2 shrink-0">
                            <div class=" shrink-0">
                                <Checkbox />
                            </div>
                            <div class="w-20 h-20 overflow-hidden rounded-sm shrink-0">
                                <LazyImage :src="g1" />
                            </div>
                        </div>

                        <div class="space-y-2 overflow-hidden grow">
                            <div class="">潘婷护发素氨基酸 3 分钟奇迹发膜多效</div>
                            <div class="text-xs text-gray-500 line-clamp-1">规格规格规格规格</div>
                            <div class="flex items-center space-x-3 overflow-x-auto whitespace-nowrap">
                                <div v-for="(item, index) in 4"
                                    class="inline-block text-xs text-red-500 border border-red-400 rounded-sm ">首单立减 30 元
                                </div>
                            </div>
                            <div>
                                <div class="px-1 py-px text-xs text-red-500 rounded-sm bg-gradient-to-r from-red-200">秒杀
                                    结束暑假时间 6月30日</div>
                            </div>
                            <div class="flex items-center justify-between">
                                <div>
                                    <span>¥</span>
                                    <span>399.00</span>
                                </div>
                                <div>number</div>
                            </div>
                            <div class="flex items-center justify-between text-xs text-gray-600">
                                <div>
                                    满 1 件可低价换购
                                </div>
                                <div class="flex items-center">
                                    <div>去换购</div>
                                    <IMingcute:rightFill />
                                </div>
                            </div>
                            <div class="flex items-center justify-between space-x-1 text-xs text-gray-600">
                                <div class=" line-clamp-1">
                                    赠品：潘婷pro-v3mm设弧精华素乳
                                </div>
                                <div class=" shrink-0">x3</div>
                                <div class=" shrink-0">
                                    <IMingcute:rightFill />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mt-4 space-y-4 pl-14">
                        <div class="flex items-center h-16">
                            <div class="w-16 h-full overflow-hidden rounded-sm shrink-0">
                                <LazyImage :src="g2" />
                            </div>
                            <div class="flex flex-col h-full ml-2 grow">
                                <div class="text-xs line-clamp-2 ">
                                    <span
                                        class="inline-block p-px px-1 text-red-500 scale-75 border border-red-500 rounded-sm">加价购</span>
                                    <span>swisse思维是维生素C+泡腾片10片 清新草莓味，双效提升素C+泡腾片10片 清新草莓味，双效提升自身</span>
                                </div>
                                <div class="grow"></div>
                                <div class="flex items-center justify-between text-xs">
                                    <div class="text-red-500">
                                        <span class="">¥</span>
                                        <span class="text-sm">399</span>
                                    </div>
                                    <div>
                                        x 1
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="flex items-center h-16">
                            <div class="w-16 h-full overflow-hidden rounded-sm shrink-0">
                                <LazyImage :src="g3" />
                            </div>
                            <div class="flex flex-col h-full ml-2 grow">
                                <div class="text-xs line-clamp-2 ">
                                    <span
                                        class="inline-block p-px px-1 text-red-500 scale-75 border border-red-500 rounded-sm">赠品</span>
                                    <span>swisse思维是维生素C+泡腾片10片 清新草莓味，双效提升素C+泡腾片10片 清新草莓味，双效提升自身</span>
                                </div>
                                <div class="grow"></div>
                                <div class="flex items-center justify-between text-xs">
                                    <div class="text-red-500">
                                        <span class="">¥</span>
                                        <span class="text-sm">399</span>
                                    </div>
                                    <div>
                                        x 1
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="flex items-center justify-between p-2 text-xs bg-white shrink-0">
            <div class="flex items-center space-x-2">
                <div>
                    <Checkbox label="全选" />
                </div>
                <div>
                    <div class="text-sm">合计：¥399</div>
                    <div class="text-gray-500 ">优惠减：¥300 <span class="px-1 py-px border rounded-lg">优惠明细</span></div>
                </div>
            </div>
            <div class="p-2 text-white bg-red-500 rounded-full" @click="submit">
                去结算 (3)
            </div>
        </div>
    </div>
</template>
    
<script setup lang='ts'>

import g1 from '~/assets/shop/goods/g1.png'
import g2 from '~/assets/shop/goods/g2.png'
import g3 from '~/assets/shop/goods/g3.png'
const router = useRouter()
const submit = () => {
    router.push({
        name: 'order-confirm',
        params:{
            id:1,
        },
        query: {
            source: 'cart'
        }
    })
}
</script>
    
<style></style>